<template>
    <!-- 固定高度 -->
    <RecycleScroller class="scroller" :items="list" :item-size="32" key-field="id" v-slot="{ item }">
        <!-- 直接渲染会卡死 -->
        <!-- <template v-for="item in list"> -->
        <div class="user">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            {{ item }}
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
            <img src="../assets/vue.svg" alt="">
        </div>
    </RecycleScroller>


</template>

<script>
export default {
    props: {
        list: Array,
        use: Boolean
    },
}
</script>

<style scoped>
.scroller {
    margin: 0 auto;
    width: 800px;
    height: 100vh;
}

.user {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
</style>